<!-- 管理员:课程考核管理:题库和在线考试管理:试卷库管理 -->
<template>
  <div style="width:100% !important;">
    <div>
      <el-form inline="true"
               label-width="60px"
               size="mini">
        <el-row>
          <el-col :span="4">
            <el-form label-position="right"
                     label-suffix="：">
              <el-form-item label="课程名称"
                            prop="sjklist.kcmc">
                <el-input v-model="sjklist.kcmc"
                          placeholder="请输入内容"
                          size="mini"></el-input>
              </el-form-item>

            </el-form>
          </el-col>
          <el-col :span="4">
            <el-form label-position="right"
                     label-suffix="：">
              <el-form-item label="课程编码"
                            prop="sjklist.kcbm">
                <el-input v-model="sjklist.kcbm"
                          placeholder="请输入内容"
                          size="mini"></el-input>
              </el-form-item>

            </el-form>
          </el-col>
          <el-col :span="10">
            <div class="buttons-container-1">
              <el-button size="mini"
                         type="primary"
                         plain
                         @click='chaxun()'
                         icon="el-icon-search">查询</el-button>
              <el-button @click="onBtnaddlist()"
                         size="mini"
                         type="danger"
                         plain
                         icon="el-icon-circle-plus-outline">新建试卷</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin:2vh 0 0 0;">
      <el-table :data="tableData"
                border
                class="xpaas-table-class"
                row-class-name="xpaas-row-class"
                cell-class-name="xpaas-cell-class"
                header-row-class-name="xpaas-header-row-class"
                header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="itempool.kcbm,itempoolkcmc"
                         label="课程【课程编码】"
                         align="center"><template slot-scope="scope">
            {{scope.row.itempool.kcmc}}【{{scope.row.itempool.kcbm}}】
          </template></el-table-column>
        <el-table-column prop="sjbt"
                         label="试卷"
                         align="center"></el-table-column>
        <el-table-column prop="guideitemrank"
                         label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button @click="onBtnDetailClickHandler(scope.row.id)"
                       size="mini"
                       label="试卷 "
                       plain
                       icon="el-icon-document"
                       type="primary">详情</el-button>
            <el-button @click="onBtnDeleteClickHandler(scope.row.id)"
                       size="mini"
                       label="试卷 "
                       plain
                       icon="el-icon-delete"
                       type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="search-result-desc-panel">
      <span>共找到 {{ searchResultPagin.total }} 条记录，当前显示 {{
          (searchResultPagin.total > 0) ? ((searchResultPagin.currentPage - 1) * searchResultPagin.perpageCount + 1) : (0)
          }} - {{
          (((searchResultPagin.perpageCount*searchResultPagin.currentPage)-searchResultPagin.total) > 0) ?  (searchResultPagin.total):(searchResultPagin.currentPage * searchResultPagin.perpageCount) 
          }} 条记录。</span>
    </div>
    <div class="search-result-pagin-panel">
      <el-pagination @size-change="onPerpageSizeChangeHandler"
                     @current-change="onCurrentPageNoChangeHandler"
                     :current-page="searchResultPagin.currentPage"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchResultPagin.perpageCount"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchResultPagin.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { gettestpaper, deltestpaper } from '@/api/examinations/sjkgetlist.js'
import mymsg from '@/api/msg.js'
export default {
  data() {
    return {
      sjklist: { kcbm: '', kcmc: '' },
      id: '',
      clazz: '',
      tableData: [{}],
      searchResultPagin: {
        total: 1000,
        perpageCount: 10,
        currentPage: 1,
        currentStart: 31,
        currentEnd: 40,
      },
    }
  },
  created() {
    this.gettestpaper()
  },

  methods: {
    chaxun() {
      this.gettestpaper()
    },
    gettestpaper() {
      gettestpaper(
        this.searchResultPagin.currentPage,
        this.searchResultPagin.perpageCount,
        this.sjklist
      ).then((res) => {
        this.searchResultPagin.total = res.data.data.total
        this.tableData = res.data.data.records
        console.log(this.tableData)
      })
    },

    onPerpageSizeChangeHandler: function (pPageSize) {
      this.searchResultPagin.perpageCount = pPageSize
      this.gettestpaper()
    },
    onCurrentPageNoChangeHandler: function (pPageNo) {
      this.searchResultPagin.currentPage = pPageNo
      this.gettestpaper()
    },
    onBtnDetailClickHandler: function (x) {
      this.$router.push({
        name: '试卷详情',
        params: { id: x },
      })
    },
    onBtnaddlist() {
      this.$router.push({ name: '新增试卷' })
    },
    onBtnDeleteClickHandler: function (id) {
      deltestpaper(id).then((res) => {
        this.gettestpaper()
        mymsg('删除', res)
      })
    },
    onBtnModifyClickHandler: function () {},
  },
}
</script>
<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';

.search-result-pagin-panel {
  text-align: right;
}
.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
</style>
